<template>
    <el-dialog :title="dialogFrom.dialogTitle" :model-value="dialogFrom.dialogVisible"
        @input:model-value="updateDialogVisible" align-center width="60%" :before-close="onCancel">
        <el-descriptions title="日志详情" border :column="1" label-width="120px">
            <el-descriptions-item label="登录用户">{{dataInfo.username}}</el-descriptions-item>
            <el-descriptions-item label="用户名">{{dataInfo.nickName}}</el-descriptions-item>
            <el-descriptions-item label="登录时间">{{dataInfo.loginTime}}</el-descriptions-item>
            <el-descriptions-item label="登录IP">{{dataInfo.loginIp}}</el-descriptions-item>
            <el-descriptions-item label="设备信息">{{dataInfo.deviceInfo}}</el-descriptions-item>
            <el-descriptions-item label="登录状态">
                <el-tag v-if="dataInfo.loginStatus == 0" type="success">成功</el-tag>
                <el-tag v-else type="danger">失败</el-tag>                
            </el-descriptions-item>
            <el-descriptions-item label="请求参数">{{dataInfo.requestParam}}</el-descriptions-item>
            <el-descriptions-item label="User-Agent">{{dataInfo.userAgent}}</el-descriptions-item>
            <el-descriptions-item label="登出时间">{{dataInfo.logoutTime}}</el-descriptions-item>
            <el-descriptions-item label="登录渠道">
                <el-tag v-if="dataInfo.loginChannel == 0" type="success">账号密码</el-tag>
                <el-tag v-if="dataInfo.loginChannel == 1" type="danger">OAuth</el-tag>
                <el-tag v-if="dataInfo.loginChannel == 2" type="warning">手机号-短信</el-tag>
            </el-descriptions-item>
        </el-descriptions>
    </el-dialog>
</template>
<script lang="ts" setup>
// -------------------------------------------------导入相关引用-------------------------------------------------

import { ref, watch } from 'vue';
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import type { DataInfo } from '@/api/log/SysLoginLog'
import { getInfo, saveInfo, editInfo } from '@/api/log/SysLoginLog'

// -------------------------------------------------相关参数定义-------------------------------------------------

const props = withDefaults(defineProps<{
    dialogFrom: DialogFrom
}>(), {
    dialogFrom: () => ({
        dialogTitle: '',
        dialogVisible: false,
        infoId: null,
    })
});

const dataInfo = ref<DataInfo>({
    id: null,
    userId: '',
    username: '',
    nickName:'',
    loginTime: '',
    loginIp: '',
    loginLocation: '',
    deviceInfo: '',
    loginStatus: null,
    failureReason: '',
    token: '',
    requestParam: '',
    userAgent: '',
    logoutTime: '',
    loginChannel: null,
})

// ---------------------------------------------------事件定义--------------------------------------------------

const emit = defineEmits(['update:dialogFrom', 'onParentSearch']);

// -------------------------------------------------操作方法定义-------------------------------------------------

/**
 * 监听dialogFrom参数
 */
watch(() => props.dialogFrom.dialogVisible, (newValue, oldValue) => {
    if (newValue) {
        getInfoApi();
    }
})

/**
 * 获取表单信息
 */
const getInfoApi = async () => {
    const infoId = props.dialogFrom.infoId;
    if (infoId) {
        await getInfo(infoId).then((res) => {
            if (res.data.code === 200) {
                dataInfo.value = res.data.data;
            }
        })
    }
}

/**
 * 关闭弹窗
 */
const onCancel = () => {
    resetFrom();
    emit('update:dialogFrom', {
        dialogVisible: false,
        dialogTitle: '',
        infoId: null
    });
    emit('onParentSearch');
}

/**
 * 重置表单
 */
const resetFrom = () => {
    dataInfo.value = {
        id: null,
        userId: '',
        username: '',
        nickName: '',
        loginTime: '',
        loginIp: '',
        loginLocation: '',
        deviceInfo: '',
        loginStatus: null,
        failureReason: '',
        token: '',
        requestParam: '',
        userAgent: '',
        logoutTime: '',
        loginChannel: null,
    }
}

/**
 * 更新弹窗显示状态
 * @param dialogFromParams
 * @returns void
 */
const updateDialogVisible = (dialogFromParams: DialogFrom) => {
    emit('update:dialogFrom', dialogFromParams);
}

// -------------------------------------------------实体定义区-------------------------------------------------

/**
 * 弹窗信息
 */
export interface DialogFrom {
    dialogTitle: string;
    dialogVisible: boolean;
    infoId: string | null;
}
</script>

<style lang="scss" scoped></style>